<%
    request.setCharacterEncoding("UTF-8");
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=800">
<title>댓글관리</title>
<style>
    html, body, * {
        margin: 0px;
        padding: 0px;
    }

    #page, #page div, #page img {
        width: 800px;
    }

    .insamal {
        margin: 100px 0px 100px 0px;
        text-align: center;
        color: white;
        font-size: 40pt;
    }

    .contact {
        margin: 100px 0px 30px 0px;
        text-align: left;
        color: white;
        font-size: 40pt;
    }

    .trafic .subject {
        color: white;
        font-size: 30pt;
    }

    .trafic .desc {
        color: white;
        font-size: 28pt;
        margin-bottom: 30px;
    }

    .trafic .wrap-first {
        padding-left: 30px;
    }
    .trafic .wrap-first2 {
        padding-left: 42px;
    }
    ul {
        list-style: none;
    }
    ul, li {
        display: inline;
    }

    #page img.call, #page img.map-detail {
        width: 48px;
        height: 48px;
        vertical-align: middle;
    }

    .contact a {
        text-decoration: none;
        color: white;
        font-size: 30pt;
    }

    .function a {
        text-decoration: none;
        color: white;
        font-size: 30pt;
    }

    .function ul li {
        margin-right: 30px;
    }

    .epilogue-text {
        top: 4120px;
        left: 80px;
        position: absolute;
        font-size: 55px;
    }

    .comment {
        font-size:40px;
        color: white;
    }

    #commentList td {
        padding: 5px;
        color: white;
        font-size: 25px;
    }

    #commentList td.regDt {
        text-align: right;
    }

    .deletePannel span.item {
        padding-left: 15px;
    }
</style>
<script type="text/javascript" src="resources/js/jquery-1.11.0.min.js"></script>
<script tyep="text/javascript">
    function clearComment($tr) {
        $tr.find("input[name='replyId']").val("");
        $tr.find("textarea[name='replyText']").val("");
    }

    function saveReply(button){
        var $tr = $(button).parent().parent();
        var commentId = $tr.find("input[name='commentId']").val();
        var replyId = $tr.find("input[name='replyId']").val();
        var replyText = $tr.find("textarea[name='replyText']").val();

        $.ajax({
            url: "saveReply.jsp",
            type: "POST",
            async: false,
            data: {
                commentId: commentId,
                replyId: replyId,
                replyText: replyText
            },
            complete: function(request, status) {
                if(status == "success") {
                    alert("성공!");
                } else {
                    alert("실패;-_-");
                }
                clearComment($tr);
                listComment();
            }
        });
    }

    function listComment() {
        $.ajax({
            url: "listCommentReply.jsp",
            type: "POST",
            async: false,
            data: {
            },
            complete: function(request, status) {
                if(status == "success") {
                    $("#commentList").html(request.responseText);
                } else {
                    alert("댓글을 가져오지 못했어요 ㅠㅠ");
                }

                bindDelete();
            }
        });
    }

    function bindDelete(){
        $("#commentList .deletePannel").hide();

        $("#commentList .submitCancel").click(function(){
            $(this).parent(".deletePannel").hide();
            $(this).parent().parent().children(".text").show();
        }).mouseover(function(){
            $(this).css("text-decoration", "underline");
        }).mouseout(function(){
            $(this).css("text-decoration", "");
        }).css("cursor", "pointer");

        $("#commentList .submitDelete").click(function(){
            var objId = $(this).parent().parent().children("input[name='objId']").val();
            var commentPw = $(this).parent().find("input[name='commentPw']").val();

            $.ajax({
                url: "deleteComment.jsp",
                type: "POST",
                async: false,
                data: {
                    "objId": objId,
                    "commentPw": commentPw
                },
                complete: function(request, status) {
                    if(status == "success") {
                        alert("삭제되었어요~");
                    }  else {
                        alert("오류가 났어요 ㅠㅠ 암호를 확인해주세요~");
                    }
                    listComment();
                }
            });
        }).mouseover(function(){
            $(this).css({
                "text-decoration": "underline"
            });
        }).mouseout(function(){
            $(this).css({
                "text-decoration":""
            });
        }).css("cursor", "pointer");

        $("#commentList .delete").click(function(){
            var objId = $(this).next("[name='objId']").val();
            $(this).next().next().show();
            $(this).parent().children(".text").hide();

        }).css("cursor", "pointer");
    }

    $(document).ready(function(){
        listComment();
    });
</script>
</head>
<body>
<div id="page">
    <div style="padding: 20px;background-color: #663300">
        <div class="comment" style="margin-top:80px; margin-bottom: 40px;">
            <div style="margin-bottom: 20px;">&lt;댓글관리&gt;&nbsp;&nbsp;</div>
        </div>

        <table width="100%" style="border-top: 1px solid white;">
            <colgroup>
                <col width="150" />
                <col width="" />
                <col width="200" />
            </colgroup>
            <tbody id="commentList">
            </tbody>
        </table>
        <div style="height:100px;">&nbsp;</div>
    </div>
</div>
</body>
</html>
